<script setup lang="ts">
import { formatDate } from '~/shared/utils/date.util';

const route = useRoute();
const data = ref();
const initArticleData = async () => {
  const id = route.params.id as string;
  const path = id.replaceAll('=', '/');
  const res = await useAsyncData(() => queryCollection('blog').path(`/${path}`).first());
  if (res.data.value) {
    data.value = res.data.value;
  }
};

initArticleData();

useSeoMeta({
  title: () => data.value?.title,
  description: () => data.value?.description
});
</script>

<template>
  <div>
    <div v-if="data" class="pb-6">
      <div class="mb-16">
        <h1 class="py-4 text-3xl font-bold text-amber-500 text-center mb-2 border-b-2 border-neutral-500">{{ data.title }}</h1>
        <div class="flex justify-between items-center max-lg:flex-wrap">
          <div class="flex items-center text-sm text-neutral-300">
            <p>标签：</p>
            <p
              v-for="(item, idx) in data.tags"
              :key="idx"
              class="max-lg:ml-2"
            >{{ item }}</p>
          </div>
          <p class="text-sm text-neutral-300">发布时间：{{ formatDate(data.date) }}</p>
        </div>
        <img v-if="data.image" class="my-4 max-w-full object-cover" :src="data.image" >
      </div>
  
      <ContentRenderer v-if="data" :value="data" class="markdown-page" />
      <div v-else>Home not found</div>
    </div>
  </div>
</template>

<style lang="scss">
@use "~/assets/css/markdown/style.scss";
</style>